<template>
  <div class="blog-home">
    <!-- 引入状态栏组件 -->
    <HeaderBar />
    <!-- 移除原导航栏代码 -->
    <div class="about-content">
      <h1>关于作者</h1>
      <!-- 修改 img 标签样式 -->
      <img src="@/assets/logo.png" alt="Logo" style="height: 200px; margin-right: 15px; border-radius: 50%;">
      <table class="info-table">
        <tr>
          <th colspan="2">
            <el-icon><InfoFilled /></el-icon> 博客介绍
          </th>
        </tr>
        <tr>
          <td colspan="2">欢迎来到我的个人博客网站，本网站由“笑不合了”授权<br>这里分享技术文章、生活感悟等内容，希望能给你带来启发。</td>
        </tr>
        <tr>
          <th colspan="2">
            <el-icon><UserFilled /></el-icon> 作者信息
          </th>
        </tr>
        <tr colspan="2">
          <td>作者：笑不合了 </td>
          <td>职业：学生 </td>
        </tr>
        <tr>
          <th colspan="2">
            <el-icon><Ticket /></el-icon> 教育经历
          </th>
        </tr>
        <tr>
          <td>武汉软件工程职业学院（专科）</td>
          <td>时间：2022年9月1日~2024年6月30日</td>
        </tr>
        <tr>
          <td>武汉文理学院（本科）</td>
          <td>时间：2024年9月1日~2026年6月30日</td>
        </tr>
        <tr>
          <th colspan="2">
            <el-icon><PhoneFilled /></el-icon> 联系方式
          </th>
        </tr>
        <tr>
          <td colspan="2">邮箱：3219935822@qq.com <br>Gitee:https://gitee.com/dz_404/blog</td>
        </tr>
        <tr>
          <th colspan="2">
            <el-icon><StarFilled /></el-icon> 自我评价
          </th>
        </tr>
        <tr>
          <td colspan="2">从创建项目到打包命名，花了好长的时间，<br>这里我非常感谢<a href="https://element.eleme.cn/#/zh-CN" target="_blank">element</a>和AI，在不断学习和实践的过程中，积累了一定的技术知识和项目经验<br>希望通过这个博客，能够与更多志同道合的人交流分享，共同进步
           
            <div class="block">
              <span class="demonstration"></span>
              <el-rate
                v-model="value2"
                :colors="colors">
              </el-rate>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value1: null,
        value2: null,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      }
    }
  }
</script>
<script setup>
import { useUserStore } from '../stores/userStore';
import { useRouter } from 'vue-router';
import HeaderBar from '../components/HeaderBar.vue';
import { StarFilled, PhoneFilled, MailFilled, UserFilled, InfoFilled, SchoolFilled, KeyFilled, Ticket } from '@element-plus/icons-vue'; 

const userStore = useUserStore();
const router = useRouter();
</script>

<style scoped>
/* 全局样式，防止页面出现滚动条 */
body {
  margin: 0;
  overflow-x: hidden; 
}

.blog-home {
  min-height: 100vh; 
  width: 100%; 
  padding: 0; 
  margin: 0; 
  overflow-x: hidden; 
  /* 添加背景图片 */
  background-image: url('@/assets/bj.png'); 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
}

.about-content {
  max-width: 1000px;
  margin: 20px auto;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.5); /* 设置一定的透明度，让背景图片隐约可见 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

th {
  color: #87b3f1;
}

p {
  color: #666;
  line-height: 1.6;
}
  .timeline {
    list-style-type: none;
    padding: 0;
  }

  .timeline li {
    margin-bottom: 10px;
    color: #666;
    line-height: 1.6;
  }
  .school-icon {
    font-size: 24px; /* 调整图标大小 */
    color: #409EFF; /* 调整图标颜色 */
    margin-right: 8px; /* 调整图标与文字的间距 */
  }
  .info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }

  .info-table th, .info-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .info-table th {
    background-color: #f2f2f2;
  }

  .block {
    text-align: center; /* 内联元素居中 */
  }

  .block .el-rate {
    display: inline-block; /* 确保评分组件作为内联块元素 */
  }
</style>
